<template>
  <view>
    <view v-for="(item, index) in popupList" :key="index">
        <!-- :showClose="true"  关闭图标替换为倒计时-->
      <su-popup
        v-if="index === currentIndex"
        :show="item.isShow"
        type="center"
        backgroundColor="none"
        round="0"
        :isMaskClick="false"
        @close="onClose(index)"
      >
        <view class="img-box">
          <image
            class="modal-img"
            :src="sheep.$url.cdn(item.imgUrl)"
            mode="widthFix"
            @tap.stop="onPopup(item.url)"
												@load="loadImage"
          />
        </view>
								<view class="countdown" v-if="banner1Show">
									<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="testSecond" @timeup="timeup" />
								</view>
      </su-popup>

    </view>

				<!-- 邀请弹窗 -->
				<canvas-poster
				  ref="SharePosterRef"
				  :show="state.showPosterModal"
				  :shareInfo="shareInfo"
				  @close="state.showPosterModal = false"
				/>

  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, onMounted, ref, nextTick, reactive, unref } from 'vue';
  import { saveAdvHistory } from '@/sheep/hooks/useModal';
  import { onLoad } from '@dcloudio/uni-app';
		import { closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
  import canvasPoster from '@/sheep/components/s-share-modal/canvas-poster/index.vue';

  // 定义属性
  const props = defineProps({
    data: {
      type: Object,
      default() {}
    }
  })
		const testSecond = ref(5)
		const banner1Show = ref(false)
		const userData = JSON.parse(uni.getStorageSync('user-store') || '{}');
		const query = "spm="+userData.userInfo.id+".1.0.3.1"
		const shareInfo = ref(
			{
			desc: "",
			image: "",
			link: "http://127.0.0.1:3000?" + query,
			forward: {path: "pages/index/index" + query},
			poster: {
				type: 'user',
			},
			checkPath: false,
			path: "pages/index/index",
			query: query,
			title: ""
			}
		)
  const SharePosterRef = ref('');
		const state = reactive({
		  showPosterModal: false, // 海报弹窗
		});

  // const modalStore = sheep.$store('modal');
  const modalStore = JSON.parse(uni.getStorageSync('modal-store') || '{}');
  console.log(modalStore)
  const advHistory = modalStore.advHistory || [];
  const currentIndex = ref(0);
  const popupList = computed(() => {
    const list = props.data.list || [];
    const newList = [];
    if (list.length > 0) {
      list.forEach((adv) => {
        if (adv.showType === 'once' && advHistory.includes(adv.imgUrl)) {
          adv.isShow = false;
        } else {
          adv.isShow = true;
          newList.push(adv);
        }

        // 记录弹窗已显示过
        saveAdvHistory(adv);
      });
    }
    return newList;
  });

		const getSencond = () => {
			setTimeout(() => {
				testSecond.value = 5
			}, 10000)
 }

	const timeup = () => {
		if (testSecond.value == 5) {
			onClose(0)//倒计时结束时运行的业务逻辑，这里的是关闭当前页面
		}
	}

  // 跳转链接
  function onPopup(path) {
				if(path) {
					sheep.$router.go(path);
				}else {
					closeShareModal();
					if (!sheep.$store('user').isLogin) {
					  showAuthModal();
					  return;
					}
					unref(SharePosterRef).getPoster();
					state.showPosterModal = true;
				}
  }

  // 关闭
  function onClose(index) {
    currentIndex.value = index + 1;
    popupList.value[index].isShow = false;
  }
		// 图片渲染之后才显示倒计时
		const loadImage = () => {
			banner1Show.value = true
		};

		onMounted(() => {
			nextTick(() => {
			  getSencond();
			}, 10000);
		})
</script>

<style lang="scss" scoped>
  .img-box {
    width: 610rpx;
				border-radius: 30rpx;
    height: 800rpxrpx;
  }
  .modal-img {
    width: 100%;
    height: 100%;
				border-radius: 30rpx;
  }
		.countdown{
			padding: 10rpx 0;
			width: 30%;
			margin: auto;
			text-align: center;
			background-color: #e5e2e2;
			border-radius: 30rpx;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
</style>
